<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>加密登录调试工具</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
            background-color: #f5f5f5;
        }
        .container {
            background: white;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
            margin-bottom: 20px;
        }
        .form-group {
            margin-bottom: 15px;
        }
        label {
            display: block;
            margin-bottom: 5px;
            font-weight: bold;
        }
        input, textarea {
            width: 100%;
            padding: 8px;
            border: 1px solid #ddd;
            border-radius: 4px;
            box-sizing: border-box;
        }
        textarea {
            height: 100px;
            resize: vertical;
        }
        button {
            background-color: #007bff;
            color: white;
            padding: 10px 20px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            margin-right: 10px;
        }
        button:hover {
            background-color: #0056b3;
        }
        .result {
            background-color: #f8f9fa;
            border: 1px solid #dee2e6;
            border-radius: 4px;
            padding: 10px;
            margin-top: 10px;
            white-space: pre-wrap;
            font-family: monospace;
        }
        .error {
            background-color: #f8d7da;
            border-color: #f5c6cb;
            color: #721c24;
        }
        .success {
            background-color: #d4edda;
            border-color: #c3e6cb;
            color: #155724;
        }
    </style>
</head>
<body>
    <h1>🔐 加密登录调试工具</h1>
    
    <div class="container">
        <h2>1. 数据加密测试</h2>
        <div class="form-group">
            <label for="username">用户名:</label>
            <input type="text" id="username" value="admin">
        </div>
        <div class="form-group">
            <label for="password">密码:</label>
            <input type="password" id="password" value="123456">
        </div>
        <button onclick="testEncryption()">测试加密</button>
        <div id="encryptResult" class="result" style="display: none;"></div>
    </div>

    <div class="container">
        <h2>2. 解密测试</h2>
        <div class="form-group">
            <label for="encryptedData">加密数据:</label>
            <textarea id="encryptedData" placeholder="粘贴加密后的数据"></textarea>
        </div>
        <button onclick="testDecryption()">测试解密</button>
        <div id="decryptResult" class="result" style="display: none;"></div>
    </div>

    <div class="container">
        <h2>3. 完整登录测试</h2>
        <button onclick="testNormalLogin()">普通登录</button>
        <button onclick="testEncryptedLogin()">加密登录</button>
        <div id="loginResult" class="result" style="display: none;"></div>
    </div>

    <script>
        const AES_KEY = 'aiServerAESKey16';
        const SERVER_URL = 'http://localhost:8080/api';

        // AES加密函数
        function aesEncrypt(text) {
            try {
                // 使用Web Crypto API进行AES加密
                // 注意：这里使用简化的实现，实际项目中应该使用更安全的方法
                
                // 将密钥转换为字节数组
                const keyBytes = new TextEncoder().encode(AES_KEY);
                const textBytes = new TextEncoder().encode(text);
                
                // 简单的XOR加密（仅用于演示，不安全）
                let encrypted = '';
                for (let i = 0; i < textBytes.length; i++) {
                    const keyByte = keyBytes[i % keyBytes.length];
                    const encryptedByte = textBytes[i] ^ keyByte;
                    encrypted += encryptedByte.toString(16).padStart(2, '0');
                }
                
                return encrypted;
            } catch (error) {
                console.error('加密失败:', error);
                return null;
            }
        }

        // AES解密函数
        function aesDecrypt(encryptedHex) {
            try {
                const keyBytes = new TextEncoder().encode(AES_KEY);
                let decrypted = '';
                
                for (let i = 0; i < encryptedHex.length; i += 2) {
                    const encryptedByte = parseInt(encryptedHex.substr(i, 2), 16);
                    const keyByte = keyBytes[(i / 2) % keyBytes.length];
                    const decryptedByte = encryptedByte ^ keyByte;
                    decrypted += String.fromCharCode(decryptedByte);
                }
                
                return decrypted;
            } catch (error) {
                console.error('解密失败:', error);
                return null;
            }
        }

        function testEncryption() {
            const username = document.getElementById('username').value;
            const password = document.getElementById('password').value;
            
            const loginData = {
                username: username,
                password: password
            };
            
            const jsonData = JSON.stringify(loginData);
            const encrypted = aesEncrypt(jsonData);
            
            const resultDiv = document.getElementById('encryptResult');
            resultDiv.style.display = 'block';
            
            if (encrypted) {
                resultDiv.className = 'result success';
                resultDiv.textContent = `原始数据: ${jsonData}\n\n加密后数据: ${encrypted}`;
                document.getElementById('encryptedData').value = encrypted;
            } else {
                resultDiv.className = 'result error';
                resultDiv.textContent = '加密失败';
            }
        }

        function testDecryption() {
            const encryptedData = document.getElementById('encryptedData').value;
            
            if (!encryptedData) {
                alert('请输入加密数据');
                return;
            }
            
            const decrypted = aesDecrypt(encryptedData);
            
            const resultDiv = document.getElementById('decryptResult');
            resultDiv.style.display = 'block';
            
            if (decrypted) {
                resultDiv.className = 'result success';
                resultDiv.textContent = `解密后数据: ${decrypted}`;
                
                try {
                    const parsed = JSON.parse(decrypted);
                    resultDiv.textContent += `\n\n解析后对象:\n${JSON.stringify(parsed, null, 2)}`;
                } catch (e) {
                    resultDiv.textContent += `\n\nJSON解析失败: ${e.message}`;
                }
            } else {
                resultDiv.className = 'result error';
                resultDiv.textContent = '解密失败';
            }
        }

        async function testNormalLogin() {
            const username = document.getElementById('username').value;
            const password = document.getElementById('password').value;
            
            const loginData = {
                username: username,
                password: password
            };
            
            try {
                const response = await fetch(`${SERVER_URL}/auth/login`, {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify(loginData)
                });
                
                const result = await response.text();
                
                const resultDiv = document.getElementById('loginResult');
                resultDiv.style.display = 'block';
                resultDiv.className = response.ok ? 'result success' : 'result error';
                resultDiv.textContent = `普通登录结果 (${response.status}):\n${result}`;
                
            } catch (error) {
                const resultDiv = document.getElementById('loginResult');
                resultDiv.style.display = 'block';
                resultDiv.className = 'result error';
                resultDiv.textContent = `普通登录错误: ${error.message}`;
            }
        }

        async function testEncryptedLogin() {
            const username = document.getElementById('username').value;
            const password = document.getElementById('password').value;
            
            const loginData = {
                username: username,
                password: password
            };
            
            const jsonData = JSON.stringify(loginData);
            const encrypted = aesEncrypt(jsonData);
            
            if (!encrypted) {
                alert('数据加密失败');
                return;
            }
            
            const requestData = {
                data: encrypted
            };
            
            try {
                const response = await fetch(`${SERVER_URL}/auth/login`, {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-Encrypted': 'true'
                    },
                    body: JSON.stringify(requestData)
                });
                
                const result = await response.text();
                
                const resultDiv = document.getElementById('loginResult');
                resultDiv.style.display = 'block';
                resultDiv.className = response.ok ? 'result success' : 'result error';
                resultDiv.textContent = `加密登录结果 (${response.status}):\n原始数据: ${jsonData}\n加密数据: ${encrypted}\n\n响应: ${result}`;
                
            } catch (error) {
                const resultDiv = document.getElementById('loginResult');
                resultDiv.style.display = 'block';
                resultDiv.className = 'result error';
                resultDiv.textContent = `加密登录错误: ${error.message}`;
            }
        }

        // 页面加载时自动测试加密
        window.onload = function() {
            testEncryption();
        };
    </script>
</body>
</html>